<template>

  <div class="box">
    <vue-particles
      color="#92caff"
      :particleOpacity="0.9"
      :particlesNumber="180"
      shapeType="circle"
      :particleSize="6"
      linesColor="#92caff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.6"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    >
    </vue-particles>

    <img id="logo" src="@/assets/images/logo.png" alt="电商ERP就选吉客云"  class="logo_img">
    <div class="form_background">
    </div>

    <div class="login-section">
      <div class="top_form">
        <div class="login-container">
          <div class="logo">
          </div>
          <h2>信息填写</h2>
          <form id="loginForm">
            <div class="form-group">
              <label for="jikeId">系统账号</label>
              <input type="text" class="ipt" v-model="JkNumber" placeholder="请输入系统账号">
            </div>

            <div class="form-group">
              <label for="username">网店订单号</label>
              <input type="text" class="ipt" v-model="sourceTradeNos" placeholder="请输入网店订单号">
            </div>

            <div class="form-group">
              <label for="password">买家昵称</label>
              <input type="text" class="ipt" v-model="userName" placeholder="请输入买家昵称">
            </div>
            <div class="form_btn">
              <button class="btn_home reset" type="button"   @click="reset">重置</button>
              <button class="btn_home submit" type="button"   @click="submit">提交</button>
              <button class="btn_home search form_btn_search" type="button"   @click="getSearch($event)">跳转登录</button>
            </div>

          </form>
        </div>

      </div>
      <div style="display: flex;justify-content: center;margin-top: 20px;">
        <el-image
          :src="imgUrl"
          fit="cover"
          style="width: 100px;height: 100px;"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>

      <div class="footer">
        <p class="tech-support">技术支持：常州慧锦网络科技有限公司</p>
        <p>邓经理：18151991375</p>
        <p class="phone_text">苏ICP备2025172255号-2</p>
      </div>
    </div>
    <div class="record_text" >苏ICP备2025172255号-2</div>
  </div>
</template>

<script>
import {saveBusinessApi} from "@/api/business.js"
import "./index.scss"
import { removeToken } from '@/utils/auth'
import imgUrl from "@/assets/images/good.png"
export default {
  name: "home",
  data() {
    return {
      JkNumber: '',
      sourceTradeNos: '',
      userName: '',
      imgUrl,
    }
  },
  mounted() {
    localStorage.clear();
    removeToken()
  },
  watch: {},
  methods: {
    reset() {
      this.JkNumber = ''
      this.sourceTradeNos = ''
      this.userName = ''
    },
    getSearch(){
      event.preventDefault();
      this.$router.push({path:'/login'})
    },
    submit() {
      if (!this.JkNumber || this.JkNumber.trim() == '') {
        this.$message.error('请输入系统账号')
        return
      }
      if (!this.sourceTradeNos || this.sourceTradeNos.trim() == '') {
        this.$message.error('请输入网店订单号')
        return
      }
      if (!this.userName ||this.userName.trim() == '') {
        this.$message.error('请输入买家昵称')
        return
      }
      let formData = {
        JkNumber: this.JkNumber,
        sourceTradeNos: this.sourceTradeNos,
        userName: this.userName
      };
      saveBusinessApi(formData).then((res) => {
        if(res.code =="0"){
          this.$message.error(res.msg)
          return
        }
        this.reset()
        this.$message.success('成功')
      }).catch((error) => {
        this.$message.error(`错误${error}`)
      });
    }
  }
};
</script>

<style scoped lang="scss">
.lizi {
  background-size: cover;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.phone_text{
  display: none;
}

.record_text{
  position:fixed;bottom:10px;width:100vw;text-align: center; color: rgba(255, 255, 255, 0.8);font-size: 13px;
}
.form_btn{
  display: flex;
}
/* 媒体查询，手机端样式 */
@media (max-width: 768px) {
  .login-section{
    width: 100vw;
  }
  .record_text{
    display: none;
  }
  .phone_text{
    display: block;
  }
  .form_btn{
    justify-content: space-around;
  }
  .form_btn_search,.form_background{
    display: none;
  }
  .footer{
    margin-top: 0px;
  }
}

</style>
